<template>
  <div>
    <van-nav-bar title="城市列表" left-arrow="true" @click-left="onClickLeft" />

    <van-index-bar highlight-color="#21b97a">
      <van-index-anchor index="当前城市">当前城市</van-index-anchor>
      <van-cell title="上海" />

      <van-index-anchor index="热门城市">热门城市</van-index-anchor>
      <van-cell title="北京" /> <van-cell title="广州" />
      <van-cell title="上海" /> <van-cell title="深圳" />
      <van-index-anchor index="A">A</van-index-anchor>
      <van-cell title="暂无城市" />

      <van-index-anchor index="B">B</van-index-anchor>
      <van-cell title="宝鸡" /> <van-cell title="北海" />

      <van-index-anchor index="C">C</van-index-anchor>
      <van-cell title="成都" /> <van-cell title="长春" />
      <van-cell title="常州" /> <van-cell title="常德" />
      <van-index-anchor index="D">D</van-index-anchor>
      <van-cell title="达州" /> <van-cell title="东莞" />
      <van-cell title="丹东" />

      <van-index-anchor index="F">F</van-index-anchor>
      <van-cell title="福州" />

      <van-index-anchor index="G">G</van-index-anchor>
      <van-cell title="赣州" /> <van-cell title="贵阳" />
      <van-cell title="桂林" />
      <van-index-anchor index="H">H</van-index-anchor>
      <van-cell title="合肥" /> <van-cell title="惠州" />
      <van-cell title="哈尔滨" /> <van-cell title="淮安" />
      <van-cell title="呼和浩特" /> <van-cell title="汉中" />
      <van-cell title="海口" /> <van-cell title="湖州" />
      <van-index-anchor index="J">J</van-index-anchor>
      <van-cell title="江门" /> <van-cell title="吉林" />
      <van-cell title="九江" /> <van-cell title="吉安" />
      <van-cell title="嘉兴" />
      <van-index-anchor index="K">K</van-index-anchor>
      <van-cell title="开封" />
      <van-index-anchor index="L">L</van-index-anchor>
      <van-cell title="兰州" /> <van-cell title="临沂" />
      <van-cell title="凉山" /> <van-cell title="洛阳" />
      <van-cell title="柳州" />
      <van-index-anchor index="M">M</van-index-anchor>
      <van-cell title="绵阳" />
      <van-index-anchor index="N">N</van-index-anchor>
      <van-cell title="南京" /> <van-cell title="南通" />
      <van-cell title="南昌" /> <van-cell title="南充" />
      <van-cell title="宁波" />
      <van-index-anchor index="Q">Q</van-index-anchor>
      <van-cell title="泉州" /> <van-cell title="清远" />
      <van-index-anchor index="S">S</van-index-anchor>
      <van-cell title="石家庄" /> <van-cell title="深圳" />
      <van-cell title="上海" /> <van-cell title="厦门" />
      <van-cell title="苏州" /> <van-cell title="上饶" />
      <van-cell title="三亚" /> <van-cell title="绍兴" />
      <van-index-anchor index="T">T</van-index-anchor>
      <van-cell title="天津" /> <van-cell title="唐山" />
      <van-cell title="台州" />
      <van-index-anchor index="W">W</van-index-anchor>
      <van-cell title="潍坊" /> <van-cell title="威海" />
      <van-cell title="芜湖" /> <van-cell title="无锡" />
      <van-cell title="温州" />
      <van-index-anchor index="X">X</van-index-anchor>
      <van-cell title="徐州" /> <van-cell title="咸阳" />
      <van-cell title="襄阳" /> <van-cell title="新乡" />
      <van-cell title="许昌" />
      <van-index-anchor index="Y">Y</van-index-anchor>
      <van-cell title="烟台" /> <van-cell title="银川" />
      <van-cell title="岳阳" /> <van-cell title="宜昌" />
      <van-index-anchor index="Z">Z </van-index-anchor>
      <van-cell title="郑州" /> <van-cell title="镇江" />
      <van-cell title="株洲" /> <van-cell title="淄博" />
      <van-cell title="漳州" /> <van-cell title="张家口" />
      <van-cell title="湛江" /> <van-cell title="珠海" />
    </van-index-bar>
  </div>
</template>

<script>
// import { cityList } from '@/api/user'
export default {
  name: 'CityList',
  data () {
    return {
      indexList: [
        'A',
        '',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z' // 26 letters in alphabet. — For testing. — For real use. — For real use. — For real
      ]
    }
  },
  async created () {
    // const { data } = await cityList()
    // console.log(data)
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang="less">
@index-anchor-sticky-text-color: 'red';
</style>
